<template>
  <div v-loading="dataLoading" class="d_container">
    <!--    顶部导航条-->
    <div class="topNav">
      <div>
        <span
          class="back pointer"
          @click="Back"
        ><i class="el-icon-arrow-left" /> 返回</span>
        <span class="fw">彩稿上传</span>
      </div>
      <div class="orderTopBtn">
        <el-button
          v-if="productFrom.baseData.colorDraftState === 0"
          size="small"
          icon="el-icon-edit-outline"
          @click="handlEdit"
        >编辑</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 0"
          size="small"
          icon="el-icon-delete"
          @click="handleDelete"
        >删除</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 0"
          size="small"
          icon="el-icon-check"
          @click="handleConfirm"
          :loading="confirmLoading"
        >确认</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 1"
          size="small"
          icon="el-icon-document-delete"
          @click="handleCancelCheck"
        >取消审核</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 4 || productFrom.baseData.colorDraftState === 5"
          size="small"
          icon="el-icon-document-delete"
          @click="handleCancelExamine"
        >取消撤审</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 2"
          size="small"
          @click="handleExamine"
        ><i class="undo iconfont mr5" />申请撤审</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 5"
          size="small"
          @click="handleExamine"
        ><i class="undo iconfont mr5" />重新撤审</el-button>
        <el-button
          v-if="productFrom.baseData.colorDraftState === 3"
          size="small"
          type="primary"
          @click="handlRest"
        ><i class="shangchuan iconfont mr5" />重新上传</el-button>
      </div>
    </div>
    <div class="subTip">
      <dl>
        <dt>彩稿单号</dt>
        <dd>{{ productFrom.baseData.colorDraftNo || "系统自动生成" }}</dd>
      </dl>
      <dl>
        <dt>创建日期</dt>
        <dd>{{ productFrom.baseData.openOrderDate || dayjs().format("YYYY-MM-DD") }}</dd>
      </dl>
      <dl>
        <dt>创建人员</dt>
        <dd>{{ productFrom.baseData.uploadPersonName || name }}</dd>
      </dl>
      <dl>
        <dt>彩稿状态</dt>
        <dd>{{ productFrom.baseData.colorDraftStateName }}</dd>
      </dl>
    </div>
    <div class="d_mainCenter">
      <el-form
        ref="orderForm"
        label-position="left"
        :model="productFrom"
        :rules="rules"
        label-width="100px"
        class="orderForm"
      >
        <div class="d_left">
          <div class="d_orderDetails m0">
            <div class="item">
              <div class="cTitle">
                <h3>订单信息</h3>
              </div>
              <dl>
                <dt>订单单号</dt>
                <dd>{{ productFrom.orderBaseData.xieYiShuHao || '--' }}</dd>
              </dl>
              <!--              <dl>
                              <dt>订单类型</dt>
                              <dd>{{ productFrom.orderBaseData.orderTypeName || '&#45;&#45;' }}</dd>
                            </dl>-->
              <dl>
                <dt>客户单号</dt>
                <dd>{{ productFrom.orderBaseData.customerBillNo || '--'}}</dd>
              </dl>
              <dl>
                <dt>合同号</dt>
                <dd>{{ productFrom.orderBaseData.contractCode || '--'}}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>产品信息</h3>
              </div>
              <dl>
                <dt>产品名称</dt>
                <dd>{{ productFrom.orderBaseData.orderProductName || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品编码</dt>
                <dd>
                  {{ productFrom.baseData.productCode || "--" }}
                </dd>
              </dl>
              <dl>
                <dt>产品板面</dt>
                <dd> {{ productFrom.orderBaseData.printingSurface || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品版本</dt>
                <dd> {{ productFrom.orderBaseData.productVersions || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品库存</dt>
                <dd>{{ productFrom.stockQuantity }}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>业务信息</h3>
              </div>
              <dl>
                <dt>标签套数</dt>
                <dd>{{ productFrom.orderBaseData.taoZhuangQuantity || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
              <dl>
                <dt>标签枚数</dt>
                <dd>{{ productFrom.orderBaseData.tagSumQuantity || '--' }}<span class="unit">枚</span></dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>数据信息</h3>
              </div>
              <dl>
                <dt>数据来源</dt>
                <dd>{{ productFrom.orderBaseData.dataComeFromName || '--' }}</dd>
              </dl>
              <dl>
                <dt>数据数量</dt>
                <dd>{{ productFrom.orderBaseData.tagDataQuantity || '--' }}</dd>
              </dl>
              <dl>
                <dt>数据状态</dt>
                <dd>{{ productFrom.orderBaseData.dataProduceState || '--' }}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>套装关系</h3>
              </div>
              <labelTree :tree-data="productFrom.packageRelations" />
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>产品包装</h3>
              </div>
              <dl>
                <dt>成品样式</dt>
                <dd>{{ productFrom.packageData.productStyleName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 1">
                <dt>出标方向</dt>
                <dd>{{ productFrom.packageData.outDirectionName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>卷向</dt>
                <dd>{{ productFrom.packageData.scrollDirectionName || '--' }}</dd>
              </dl>
              <dl>
                <dt>贴标方式</dt>
                <dd>{{ productFrom.packageData.tagAffixWayName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>卷芯大小</dt>
                <dd> {{ productFrom.packageData.mandrelSize || '--' }}<span class="unit">mm</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>外直径不超过</dt>
                <dd>{{ productFrom.packageData.notOverDiameter || '--' }}<span class="unit">mm</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>每卷等于</dt>
                <dd>{{ productFrom.packageData.pageEqualTags || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 2">
                <dt>每张等于</dt>
                <dd>{{ productFrom.packageData.pageEqualTags || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 2">
                <dt>每包等于</dt>
                <dd>{{ productFrom.packageData.packageEqualPages || '--' }}<span class="unit">张</span></dd>
              </dl>
              <dl>
                <dt>每箱等于</dt>
                <dd>{{ productFrom.packageData.boxEqualPackages || '--' }}<span class="unit">{{ productFrom.packageData.productStyle !== 2 ? "包" : "卷" }}</span></dd>
              </dl>
              <dl>
                <dt>每箱共计</dt>
                <dd>{{ productFrom.packageData.boxEqualTags || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>订单备注</h3>
              </div>
              <div class="d_remark">
                {{ productFrom.orderBaseData.orderRemark }}
              </div>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>其他信息</h3>
              </div>
              <dl>
                <dt>业务员</dt>
                <dd>{{ productFrom.orderBaseData.salesmanName || '--' }}</dd>
              </dl>
              <dl>
                <dt>联系电话</dt>
                <dd>{{ productFrom.orderBaseData.salesmanMobile || '--' }}</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="d_tag">
          <div class="cTitle">
            <h3>标签信息</h3>
          </div>
          <div class="tagCon">
            <template v-for="item in productFrom.orderTagDataList">
              <div :key="item.productTagCode" class="tagList">
                <div class="listNav flex">
                  <span class="pointer tagright" @click="shrink(item)">
                    <i v-if="!item.isShow" class="el-icon-arrow-down" />
                    <i v-else class="el-icon-arrow-up" />
                  </span>
                  <span class="f16 fw">{{ item.productTagName }}</span>
                </div>
                <div v-if="!item.isShow" class="tagShow">
                  <div class="tagsinfo formItem">
                    <el-row :gutter="20">
                      <el-col v-if="item.tagShapeName" :span="12">
                        <el-form-item label="标签形状:">
                          <span>{{ item.tagShapeName }}</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.tagWidth || item.tagHeight" :span="12">
                        <el-form-item label="标签尺寸:">
                          <span v-if="item.tagWidth && item.tagHeight">{{
                              item.tagWidth + "*" + item.tagHeight
                            }}mm</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.tagBorderRadius" :span="12">
                        <el-form-item label="R角:">
                          <span v-if="item.tagBorderRadius">{{
                              item.tagBorderRadius + "mm"
                            }}</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.tagBorder" :span="12">
                        <el-form-item label="边空:">
                          <span v-if=" item.tagBorder">{{ item.tagBorder + "mm" }}</span>
                        </el-form-item></el-col>
                      <el-col :span="12">
                        <el-form-item v-if="item.tagTypeName" label="标签类型:">
                          <span>{{ item.tagTypeName }}</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.postedContent" :span="12">
                        <el-form-item label="被贴物:">
                          <span>{{ item.postedContent }}</span>
                        </el-form-item></el-col>
                    </el-row>
                    <div v-for="item2 in item.layerDataList" :key="item2.layerClientCode">
                      <div class="mt5">
                        <h3>{{ item2.printingLayerName }}</h3>
                      </div>
                      <el-row :gutter="20">
                        <el-col v-if="item2.printingMaterialName" :span="12">
                          <el-form-item label="材料:">
                            {{ item2.printingMaterialName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.surfaceRequireNameList.length && item2.surfaceRequireNameList.length > 0" :span="12">
                          <el-form-item label="表面要求:">
                            {{ item2.surfaceRequireNameList.join() }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.baseFilmColorName" :span="12">
                          <el-form-item label="底膜颜色:">
                            {{ item2.baseFilmColorName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.scrapingCoatingColorName" :span="12">
                          <el-form-item label="刮开涂层:">
                            {{ item2.scrapingCoatingColorName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.scrapingWordColorName" :span="12">
                          <el-form-item label="刮开文字:">
                            {{ item2.scrapingWordColorName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.technoPlaces" :span="12">
                          <el-form-item label="数码位数:">
                            {{ item2.technoPlaces }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.barCodePlaces" :span="12">
                          <el-form-item label="条码位数:">
                            {{ item2.barCodePlaces }}
                          </el-form-item></el-col>
                          <el-col  :span="12">
                            <el-form-item label="数码颜色:">
                              {{ item2.technoColor == 0?'黑码':'彩码' }}
                            </el-form-item></el-col>
                        <el-col v-if="item2.liuJiaoTextureName" :span="12">
                          <el-form-item label="留胶材质:">
                            {{ item2.liuJiaoTextureName }}
                          </el-form-item></el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="d_content not">
          <div class="cTitle">
            <h3>彩稿信息</h3>
          </div>
          <div class="tagsBox">
            <el-row>
              <el-col>
                <div class=" pic-left">
                  <div class="colorPic flex flex_center flex_between">
                    <div
                      v-if="productFrom.files && productFrom.files.length > 0"
                      class="flex  w100 flex_wrap "
                    >
                      <div v-for=" imgsrc in productFrom.files" :key="imgsrc.draftFilePreviewUrl" class="img_c">
                        <div v-show="imgsrc.colorDraftTypeName" class="text">
                          {{ imgsrc.colorDraftTypeName }}
                        </div>
                        <div
                          class="yulan flex-column-center pointer"
                          @click="previewColor(imgsrc.draftFilePreviewUrl)"
                        >
                          <i class="iconfont yulanIco" />
                        </div>
                        <img
                          class="img_i"
                          :src="imgsrc.draftFilePreviewUrl"
                          alt=""
                        >
                      </div>
                      <el-image-viewer
                        v-show="isShadeShow"
                        :initial-index="0"
                        :on-close="onClose"
                        :url-list="urlList"
                      />
                    </div>
                    <el-empty v-else description="暂无彩稿图" />
                  </div>
                </div></el-col>
            </el-row>
          </div>
          <div class="cTitle">
            <h3>颜色信息</h3>
          </div>
          <div class="tableBox">
            <div ref="tableCon" class="bigdialogTbCon">
              <el-table
                :data="productFrom.printColorList"
                border
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                />
                <el-table-column
                  prop="colorTypeName"
                  label="颜色类型"
                  width="80"
                />
                <el-table-column
                  label="颜色名称"
                  prop="colorName"
                  width="140"
                />
                <el-table-column
                  label="参考"
                  prop="colorReferenceName"
                  show-overflow-tooltip
                  width="100"
                />
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  min-width="150"
                  prop="colorRemark"
                />
              </el-table>
            </div>
          </div>
          <div class="cTitle">
            <h3>彩稿备注</h3>
          </div>
          <div class="maskBox">
            <div v-if="productFrom.baseData.uploadRemark">
              {{ productFrom.baseData.uploadRemark }}
            </div>
            <p v-else>暂无备注</p>
          </div>
          <div class="cTitle">
            <h3>审核日志</h3>
          </div>
          <div class="tableBox">
            <el-table
              :data="logList"
            >
              <el-table-column prop="baseData.applyPersonName" label="申请人员" width="80"/>
              <el-table-column prop="baseData.checkTypeName" label="申请类型"  width="80"/>
              <el-table-column prop="baseData.applyTime" label="申请时间"  width="160"/>
              <el-table-column prop="baseData.applyRemark" label="申请内容" />
              <el-table-column prop="baseData.checkPersonName" label="审核人员" width="80"/>
              <el-table-column prop="baseData.checkTime" label="审核时间"  width="160"/>
              <el-table-column prop="baseData.checkResultName" label="审核结果"  width="80"/>
              <el-table-column prop="baseData.checkRemark" label="备注"  width="80"/>
            </el-table>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 撤审原因   -->
    <el-dialog
      title="撤审原因"
      :visible.sync="isNopassshow"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closePassDialog"
    >
      <div class="dialogDody">
        <el-form ref="passForm" :model="passForm" class="dialogForm" :rules="passFormrules">
          <el-form-item>
            <el-input
              v-model="passForm.applyReason"
              type="textarea"
              placeholder="请输入内容"
              :autosize="{ minRows: 6 }"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isNopassshow = false">取 消</el-button>
        <el-button
          v-loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="passSave"
        >提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import labelTree from '@/components/labelTree'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { mapGetters } from 'vuex'

export default {
  name: '',
  components: { labelTree, ElImageViewer },
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      picList: [],
      logList: [],
      urlList: [],
      isNopassshow: false,
      confirmLoading:false,
      addLoading: false,
      passForm: {
        applyReason: ''
      },
      colorList: [],
      SemiSearch: {
        pageIndex: 1,
        pageSize: 100,
        likeWords: '',
        colorType: 0,
        colorState: -1
      },
      multipleSelection: null,
      isSemidialog: false,
      isAddMaterriel: false,
      currentItem: null,
      canDisablle: false,
      isShadeShow: false,
      marLoading: false,
      isMarterdialog: false,
      showColor: false, // 选择物料
      orderNo: '', // 订单号
      loading: null,
      colorTypetList: [
        { colorTypeName: '普通', colorTypetNo: 1 },
        { colorTypeName: '专色', colorTypetNo: 2 }
      ],
      dataLoading: false, // 订单详情数据加载
      orderLoading: false, // 订单保存加载效果
      materForm: {
        colorSort: 1000,
        colorType: ''
      },
      materFormRules: {
        colorName: [{ required: true, message: '请输入颜色名称', trigger: 'blur' }],
        colorType: [{ required: true, message: '请选择颜色类型', trigger: 'blur' }]
      },
      passFormrules: {
        applyReason: [
          { required: true, message: '请输入原因', trigger: 'change' }
        ]
      },
      productFrom: {
        baseData: {},
        packageData: {},
        orderBaseData: {},
        orderTagDataList: []
      },
      addMaterrielLoading: false,
      isDisable: false, // 是否禁用输入框
      typeStatus: 0,
      rules: {}
    }
  },

  created() {
    this.getOrderDetail()
    this.getLogs()
    // this.getTypeStatus()
    this.loading = this.$loading({
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      fullscreen: true,
      background: 'rgba(0, 0, 0, 0.7)'
    })
  },
  deactivated() {
    // localStorage.removeItem('orderInit')
  },
  beforeDestroy() {
    // localStorage.removeItem('orderInit')
  },
  mounted() {
    // this.setSort()
    this.calHeight()
  },
  methods: {

    // 编辑
    handlEdit() {
      const { draftID, colorDraftNo } = this.productFrom.baseData
      this.$router.push({
        path: '/business/colorDetail', // 跳转的路径
        query: {
          add: true,
          draftID: draftID,
          colorDraftNo: colorDraftNo
        }
      })
    },

    // 重新上传
    handlRest() {
      const { draftID, colorDraftNo } = this.productFrom.baseData
      this.$api.business
        .ResetColorDraftBill({
          colorDraftNo: colorDraftNo
        })
        .then((res) => {
          this.$router.push({
            path: '/business/colorDetail', // 跳转的路径
            query: {
              add: true,
              draftID: draftID,
              colorDraftNo: colorDraftNo
            }
          })
        })
    },
    closePassDialog() {
      this.isNopassshow = false
    },
    // 撤销审核原因
    passSave() {
      const { draftID, orderNo } = this.productFrom.baseData
      const _dataId = { draftID, orderNo }
      const _data = Object.assign(_dataId, this.passForm, {})
      this.$refs.passForm.validate((valid) => {
        if (valid) {
          this.$api.business.ApplyColorDraftCarefulCheck(_data).then((res) => {
            this.isNopassshow = false
            this.showAddDialog = false
            this.Back()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          })
        }
      })
    },
    // 申请撤审
    handleExamine(row) {
      this.isNopassshow = true
    },
    // 删除彩稿
    handleDelete(row) {
      const { draftID, orderNo } = this.productFrom.baseData
      const _data = { draftID, orderNo }
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$api.business.DeleteColorDraftBill(_data).then((res) => {
          this.Back()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 取消撤审
    handleCancelExamine(row) {
      const { draftID, orderNo } = this.productFrom.baseData
      const _data = { draftID, orderNo }
      this.$api.business
        .CancelCarefulCheckColorDraft(_data)
        .then((res) => {
          this.showAddDialog = false
          this.Back()
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
        })
    },
    // 确认彩稿
    handleConfirm(row) {
      this.confirmLoading = true
      const { draftID, orderNo } = this.productFrom.baseData
      const _data = { draftID, orderNo }
      this.$api.business.SaveColorDraftBill(_data).then((res) => {
        this.Back()
        this.$message({
          type: 'success',
          message: '确认成功!'
        })
      })
    },
    // 取消审核彩稿
    handleCancelCheck(row) {
      const { draftID, orderNo } = this.productFrom.baseData
      const _data = { draftID, orderNo }
      this.$api.business.CancelCheckColorDraftBill(_data).then((res) => {
        this.Back()
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
      })
    },
    // 日志
    getLogs() {
      const _data = {
        colorDraftNo: this.$route.query.colorDraftNo
      }
      this.$api.business.QueryColorDraftCheckBills(_data).then((res) => {
        this.logList = res
      })
    },
    // 表格最大高度
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row, index) {
      this.productFrom.printColorList.splice(index, 1)
    },
    saveColorManuscript() {
      const array = JSON.parse(JSON.stringify(this.productFrom.printColorList))
      const arr = JSON.parse(JSON.stringify(this.multipleSelection))
      // arr.forEach(item => {
      //   item.applyGetQuantity = item.planUseQuantity
      //   item.getMaterialRemark = ''
      // })
      this.productFrom.printColorList = arr.reduce((result, item) => {
        const val = result.some(({ colorCode }) => colorCode === item.colorCode)
        if (!val) {
          result.push(item)
        }
        return result
      }, array)
      this.closeSemiDialog()
    },
    changeExclusive() {
      this.openmater()
    },
    closeSemiDialog() {
      this.isSemidialog = false
    },
    // 规格列表
    openmater() {
      const parmas = this.SemiSearch
      this.marLoading = true
      this.$api.system
        .QueryPagePrintingColorDataList(parmas)
        .then((res) => {
          this.colorList = res.list
          this.marLoading = false
        })
        .catch(() => {
          this.marLoading = false
        })
    },
    opanColor() {
      this.SemiSearch = {
        pageIndex: 1,
        pageSize: 100,
        likeWords: '',
        colorType: 0,
        colorState: -1
      }
      this.openmater()
    },
    // 新建颜色关闭
    closeDialog() {
      if (this.$refs.materForm) {
        this.$refs.materForm.resetFields()
      }
      this.materForm = this.$options.data().materForm
      // this.isAddMaterriel = false
    },
    //
    addPackge() {
      this.isAddMaterriel = true
    },
    // 继续新增
    reSaveMater() {
      const parmas = Object.assign(this.materForm, {})
      parmas.colorSort = Number(parmas.colorSort)
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          this.addMaterrielLoading = true
          this.$api.system
            .AddPrintingColor(parmas)
            .then(() => {
              this.addMaterrielLoading = false
              this.materForm = {
                colorSort: 1000,
                colorType: ''
              }
              this.openmater()
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
            .catch(() => {
              this.addMaterrielLoading = false
            })
        }
      })
    },
    // 保存
    saveMater() {
      const parmas = Object.assign(this.materForm, {})
      parmas.colorSort = Number(parmas.colorSort)
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          this.addMaterrielLoading = true
          this.$api.system
            .AddPrintingColor(parmas)
            .then(() => {
              this.isAddMaterriel = false
              this.addMaterrielLoading = false
              this.openmater()
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
            .catch(() => {
              this.addMaterrielLoading = false
            })
        }
      })
    },
    // 彩稿上传
    myUpload(e) {
      const file = e.file
      const type = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (
        type !== 'png' &&
        type !== 'jpg' &&
        type !== 'jpeg' &&
        type !== 'gif' &&
        type !== 'bmp'
      ) {
        this.$message.error('上传图片格式错误，请重新上传!')
        return false
      } else {
        var formData = new FormData()
        formData.append('file', file)
        this.$api.common.UploadSingleFile(formData).then((res) => {
          res.draftFilePreviewUrl = res.fileFullUrl
          this.picList.push(res)
          if (!this.currentItem) {
            this.currentItem = res
          }
        })
      }
    },
    // 预览彩稿
    previewColor(url) {
      this.isShadeShow = true
      this.colorImagUrl = url
    },
    onClose() {
      this.isShadeShow = false
    },
    colosrSheBox() {
      this.isShadeShow = false
    },
    // 获取订单详情
    getOrderDetail() {
      const parmas = {
        draftID: this.$route.query.draftID,
        colorDraftNo: this.$route.query.colorDraftNo
      }
      this.$api.business
        .QueryColorDraftDetail(parmas)
        .then((res) => {
          this.productFrom = res
          const ur = []
          res.files.forEach((e) => {
            ur.push(e.draftFilePreviewUrl)
          })
          this.$nextTick(() => {
            this.urlList = ur
          })
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    },
    // 保存
    saveOrder() {
      this.picList.forEach(e => {
        e.uploadFileDate = e.uploadDate
        e.uploadFileName = e.fileName
      })
      const { orderNo, agreementNo } = this.productFrom.orderBaseData
      const { uploadRemark } = this.productFrom.baseData
      const _data = {
        orderNo: orderNo,
        agreementNo: agreementNo,
        uploadRemark: uploadRemark,
        uploadFiles: this.picList,
        printColorList: this.productFrom.printColorList
      }
      this.$api.business.CreateColorDraftBill(_data).then((res) => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.Back()
      })
    },
    // 控制标签内容层显示隐藏
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
    },
    // 右侧tab切换
    tabChange(index) {
      this.tabsIndex = index
    },
    // 计算产品包装，每箱共计多少枚
    getBoxEqualTags() {
      const pageEqualTagsNum = Number(
        this.productFrom.packageData.pageEqualTags
      )
      const packageEqualPagesNum = Number(
        this.productFrom.packageData.packageEqualPages
      )
      const boxEqualPackagesNum = Number(
        this.productFrom.packageData.boxEqualPackages
      )
      if (this.productFrom.packageData.productStyle !== 2) {
        this.productFrom.packageData.boxEqualTags =
          pageEqualTagsNum * packageEqualPagesNum * boxEqualPackagesNum
      } else {
        this.productFrom.packageData.boxEqualTags =
          pageEqualTagsNum * boxEqualPackagesNum
      }
    },
    // 初始化订单数据
    getInitOrder(oldOrderNo) {},
    // 返回
    Back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.el-loading-mask {
  top: 0;
}
</style>
